Hello world!

1 Quarto

Quarto is an open-source scientific and technical publishing system built on Pandoc (a universal document converter).

It supports executable Python code blocks within markdown. This allows you to create fully reproducible documents and reports.

Quarto can render Jupyter notebooks represented as plain text (.qmd) or as a normal notebook file (.ipynb). The Quarto VS Code Extension includes many tools that enhance working these documents. You can also convert between .ipynb and .qmd representations of a notebook using the quarto convert command.

HTML documents rendered with Quarto use Bootstrap 5 by default. This can be disabled or customized via the theme option. Take a look a at the different themes

2 Markdown

Markdown is an easy to read and write text format:

2.1 Callout

Note

Note that there are five types of callouts, including: note, warning, important, tip, and caution.

Tip

This is an example of a tip callout.

This is an example of a ‘folded’ caution callout that can be expanded by the user. You can use collapse="true" to collapse it by default or collapse="false" to make a collapsible callout that is expanded by default.

2.2 Tables

Some markdown options to create tables.

Table example 1:

Demonstration of pipe table syntax
Default Left Right Center
12 12 12 12
123 123 123 123
1 1 1 1

Table example 2:

Table 1: Main Caption
(a) First Table
Col1 Col2 Col3
A B C
E F G
A G G
(b) Second Table
Col1 Col2 Col3
A B C
E F G
A G G

See Table 1 for details, especially Table 1 (b).

Table example 3:

Sample grid table.
Fruit Price Advantages
Bananas $1.34
  • built-in wrapper
  • bright color
Oranges $2.10
  • cures scurvy
  • tasty

3 R code cells

── Attaching core tidyverse packages ──────────────────────── tidyverse 2.0.0 ──
✔ dplyr     1.1.4     ✔ readr     2.1.4
✔ forcats   1.0.0     ✔ stringr   1.5.0
✔ ggplot2   3.5.1     ✔ tibble    3.2.1
✔ lubridate 1.9.2     ✔ tidyr     1.3.1
✔ purrr     1.0.2     
── Conflicts ────────────────────────────────────────── tidyverse_conflicts() ──
✖ dplyr::filter() masks stats::filter()
✖ dplyr::lag()    masks stats::lag()
ℹ Use the conflicted package (<http://conflicted.r-lib.org/>) to force all conflicts to become errors

Here is R code output:

Code 
starwars %>%
          group_by(gender) %>%
          summarize(
                    avg_ht = mean(height, na.rm = TRUE)
          )
# A tibble: 3 × 2
  gender    avg_ht
  <chr>      <dbl>
1 feminine    167.
2 masculine   177.
3 <NA>        175

4 Equation

Use LaTeX to write equations:

\[ \chi' = \sum_{i=1}^n k_i s_i^2 \]

5 Tabsets

Create a tabset via a markdown div with the class name panel-tabset (e.g. ::: {.panel-tabset}). Each top-level heading within the div creates a new tab. For example, here is the markdown used to implement the first two tabs displayed above:

fizz_buzz <- function(fbnums = 1:50) {
  output <- dplyr::case_when(
    fbnums %% 15 == 0 ~ "FizzBuzz",
    fbnums %% 3 == 0 ~ "Fizz",
    fbnums %% 5 == 0 ~ "Buzz",
    TRUE ~ as.character(fbnums)
  )
  print(output)
}
def fizz_buzz(num):
  if num % 15 == 0:
    print("FizzBuzz")
  elif num % 5 == 0:
    print("Buzz")
  elif num % 3 == 0:
    print("Fizz")
  else:
    print(num)

Tabset group

Tab content

Tab content

6 Diagrams

Quarto has native support for embedding Mermaid and Graphviz diagrams. This enables you to create flowcharts, sequence diagrams, state diagrams, gnatt charts, and more using a plain text syntax inspired by markdown.

Code 
flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]

flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]

Mermaid can render user journey diagrams:

Code 
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me

7 CSS

SASS theme files can define both variables that globally set things like colors and fonts, as well as rules that define more fine grained behavior. To customize an existing Bootstrap theme with your own set of variables and/or rules, just provide the base theme and then your custom theme file(s):